<template>
    <!-- 入库时打开柜子详情 -->
    <div class="modal" v-if="propb.isShow&&isReload">
        <el-carousel indicator-position="outside" style="width: 60vw;" height="auto" :autoplay="false">
            <el-carousel-item v-for="item in currentBox" :key="item" style="height: 100vh;">
                <!-- 此出item指的是所有的柜子如一号柜、二号柜 -->
                <MultityBox :infos="item" />
            </el-carousel-item>
        </el-carousel>
        <div class="infos">
            <div class="title">正在打开</div>
            <div class="detail">书名：{{ currentBox[0].name }}</div>
            <div class="detail">密级：{{ currentBox[0].miji }}</div>
            <div class="detail">出版日期：{{ propb.selectInfo[0]&&propb.selectInfo[0].publishTime }}</div>
            <div class="detail">归还数量：{{ propb.selectInfo.length }}</div>
            <div class="footer">
                <el-button @click="boxOpened">{{propb.optionName}}</el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import {watch,reactive,ref} from 'vue'
    import {getCabinetInfo} from '../../../../../api/index'
    import MultityBox from './MultityBox.vue';
    const emit = defineEmits(['closeBox'])

    const propb = defineProps<{
        isShow:boolean,
        optionName:string,
        boxList:any[],
        selectInfo:any[]
    }>();

    const isReload = ref(false)

    const boxOpened = ()=>{
        isReload.value = false;
        emit('closeBox','ruku');
    }

    // 当前所有柜子
    let currentBox = reactive<any[]>([]);
    // 监听柜子选择
    watch(()=>propb.boxList,async (newVal:any[])=>{
        if(newVal.length){
            currentBox = [];
            // 根据所选柜子id查询所有柜子大小size
            Promise.all(newVal.map(async (el:any)=>{
                return await getCabinetInfo(el.cabinetId)
            })).then((res:any)=>{
                res.forEach((datas:any) => {
                    let data = datas.data;
                    // 请求获取柜子信息
                    let allData = JSON.parse(JSON.stringify(propb.boxList));
                    let thisBox = allData.find((el:any)=>el.cabinetId*1 == data.cabinetId*1).boxs;
                    let name = thisBox[0].orgName;
                    currentBox.push({
                        size:[
                            data.storey*1,
                            data.joint*1
                        ],
                        boxs:[...thisBox],
                        cabinetId:data.cabinetId,
                        name,
                        miji:thisBox[0].miji
                    })
                });
                isReload.value = true;
            })
        }
    })

    // const rukNum = computed(()=>{
    //     let count = 0;
    //     for(let i = 0; i < currentBox.length; i++) {
    //         for(let j = 0; j < currentBox[i].boxs.length; j++) {
    //             count++;
    //         }
    //     }
    //     return count;
    // })

    // const publishTime = computed(()=>{
    //     return currentBox[0]&&currentBox[0].boxs[0].createTime||'';
    // })
</script>

<style lang="less">
.modal {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
    .grids {
        top: 10vh;
        left: 10vh;
        position: absolute;
        display: grid;
        row-gap: 10px;
        column-gap: 10px;
        background-color: grey;
        padding: 1vh 1vw;
        .box-items{
            background-color: rgba(0, 0, 0,0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            .current-open{
                color: #fff;
                font-size: 12px;
                
            }
        }
        & .active{
            background-color: red;
        }
    }
    .infos {
        position: absolute;
        right: 10vh;
        width: 20vw;
        height: 40vh;
        top: 20vh;
        background-color: rgb(18, 48, 98);
        border-radius: 10px;
        border: 1px solid #fff;
        padding: 1vw;
        color: #fff;
        font-size: 12px;
        .title{
            width: 100%;
            display: flex;
            justify-content: center;
        }
        .footer {
            position: absolute;
            width: 100%;
            display: flex;
            justify-content: center;
            bottom: 1vw;
            left: 0;
        }
        .detail{
            margin-bottom: 1vh;
        }
    }
}
</style>